<template>
  <el-input @click.native="getSubstationList"
            v-if="disabled||(sb&&!substations.length)"
            type="text"
            readonly
            v-model="sb"></el-input>
  <el-select
    ref="sbSelect"
    v-else
    @click.native="getSubstationList" v-model="sbId" filterable
             :size="size"
             multiple="multiple"
             @change="getVal"
             placeholder="请选择">
    <!-- <el-option label="全部" value=""></el-option> -->
    <el-option
      v-for="item in substations"
      :key="item.id"
      :label="item.name"
      :value="item.name+','+item.longitude+','+item.latitude+','+item.id">
    </el-option>
  </el-select>
</template>

<script>
  import {getSubstationList } from '../api/api'
export default {
  name: 'substation',
  data(){
    return {
      substations:[],
      sbId:this.val,
      sb:'',
      belongTeam:{
        id:'',
        value:'',
        regions: [],
        props: {
          label: 'name',
          children: 'id',
        }
      },
    }
  },
  props:{
    size:{
      type: String,
      default: ''
    },
    multiple:{
      type:Boolean,
      default:false
    },
    disabled:{
      type:Boolean,
      default:false
    },
    val:{
      type: Array,
      default:[]
    },
    valT:{
      type: Array,
      default:[]
    }
  },
  watch: {
    val(val) {
      this.sbId = val;
    },
    valT(val){
      this.sb=this.baseJs.changeArrayToStr(val)
    }
  },
  mounted(){
    //变电站数据

  },
  methods: {
    getSubstationList(){
      if(!this.disabled&&!this.substations.length){
        getSubstationList({departId:this.$store.getters.userDeptId}).then(res => {
          this.substations = res.obj;
          this.$nextTick(()=>{
            this.$refs.sbSelect.visible=true
          })
        });
      }
    },
    //班组选择
    getVal(val){
      this.$emit("changes",val);
    },
  }
}
</script>

<style lang="scss">
  .pos-ab{position: absolute;}
  .box-tree{position: absolute;width:100%;height:auto;z-index:99;}
</style>
